<template>
  <section class="bf-tree-wrap">
    <el-input v-if="filter" v-model="match"
              placeholder="搜索节点"
              class="bf-tree-filter"
              suffix-icon="el-icon-search"
              size="small"/>
    <div :id="tid" class="bf-tree-container"></div>
  </section>
</template>

<script lang="ts">
  import {Vue, Component, Prop, Watch, Emit} from 'vue-property-decorator'
  import 'jquery.fancytree'
  import 'jquery-ui'
  import 'ui-contextmenu'
  import 'jquery.fancytree/dist/modules/jquery.fancytree.filter'
  import 'jquery.fancytree/dist/modules/jquery.fancytree.menu'
  import 'jquery.fancytree/dist/skin-win8/ui.fancytree.min.css'
  import 'jquery-ui/themes/base/all.css'
  import bfFancytree from '../../utils/bf-fancytree'
  import bfI18n from '../../modules/i18n'

  @Component
  export default class Fancytree extends Vue {
    @Prop({default: "tid"})
    tid: string;
    @Prop({default: true})
    filter: boolean;
    @Prop({
      default: () => {
        return {}
      }
    })
    option: object;
    @Prop({
      default: () => {
        return {}
      }
    })
    contextmenu: object;

    match: string = "";

    initTree() {
      let $tree: any = $(this._tid);
      $tree.fancytree(this._option);
      $tree.find('.fancytree-container').addClass('fancytree-connectors');
      this.loaded();
    }

    loadContextMenu() {
      let contextmenu: any = this._menu;
      $(this._tid).contextmenu(contextmenu);
    }

    contextMenuBeforeOpen(event, ui) {
      let _$: any = $;
      let $ui: any = _$.ui;
      let node = $ui.fancytree.getNode(ui.target);
      node.setActive();
    }

    contextMenuClose(event, ui) {
      // let _$: any = $;
      // let $ui: any = _$.ui;
      // let node = $ui.fancytree.getNode(ui.target);
      // node.setFocus();
    }

    contextMenuSelect(event, ui) {
      let _$: any = $;
      let $ui: any = _$.ui;
      let node = $ui.fancytree.getNode(ui.target);
      console.log(node.title, ui.cmd);
      switch (ui.cmd) {
        case "online":
          bfFancytree.showOnline(this._tid);
          break;
        case "showAll":
          bfFancytree.showAll(this._tid);
          break;
        case "selectAll":
          bfFancytree.selectAll(this._tid, true);
          break;
        case "desSelectAll":
          bfFancytree.selectAll(this._tid, false);
          break;
        case "expandAll":
          bfFancytree.expandAll(this._tid, true);
          break;
        case "desExpandAll":
          bfFancytree.expandAll(this._tid, false);
          break;
        default:
          break;
      }
    }

    mounted() {
      this.initTree();
      this.loadContextMenu();
    }

    @Watch('match')
    watchMatch(val) {
      bfFancytree.filterNodes(this._tid, val);
    }

    @Watch('contextmenu', {deep: true})
    reloadContextMenu(val) {
      this.loadContextMenu();
    }

    @Emit('load')
    loaded() {
    }

    get _tid() {
      return `#${this.tid}`;
    }

    get _menu() {
      let _contextMenu = {
        delegate: "span.fancytree-node",
        autoFocus: true,
        menu: [
          {
            title: bfI18n.t("tree.showOnline"),
            cmd: "online",
            uiIcon: 'bf-icon gw-note'
          },
          {
            title: bfI18n.t("tree.showAll"),
            cmd: "showAll",
            uiIcon: 'ui-icon-scissors'
          },
          {title: "----"},
          {
            title: bfI18n.t("tree.selectAll"),
            cmd: "selectAll",
            uiIcon: "bf-icon gw-selectedAll"
          },
          {
            title: bfI18n.t("tree.desSelectAll"),
            cmd: "desSelectAll",
            uiIcon: "bf-icon gw-deselectAll"
          },
          {
            title: bfI18n.t("tree.expandAll"),
            cmd: "expandAll",
            uiIcon: "bf-icon gw-expandAll"
          },
          {
            title: bfI18n.t("tree.desExpandAll"),
            cmd: "desExpandAll",
            uiIcon: "bf-icon gw-collapseAll"
          },
        ],
        beforeOpen: this.contextMenuBeforeOpen,
        close: this.contextMenuClose,
        select: this.contextMenuSelect
      };
      return Object.assign(_contextMenu, this.contextmenu);
    }

    get _option() {
      let _options = {
        extensions: ["filter"],
        quicksearch: true,
        filter: {
          autoApply: false,   // 打开时是否自动加载数据
          autoExpand: true, // 父、子节点筛选
          counter: false,     // 在图标处显示有几个匹配节点
          fuzzy: false,      //  输入'fb' 匹配'FooBar'
          hideExpandedCounter: true,  // 隐藏徽章
          hideExpanders: false,       // 如果所有子节点都通过筛选隐藏，隐藏扩展
          highlight: true,   // 高亮
          leavesOnly: false, // 只显示符合条件的节点
          nodata: false,      // 没有符合条件的节点，不显示 nodata
          mode: "hide"       // "hide" or "dimm"
        },
        checkbox: true,
        selectMode: 3,
        source: [
          {
            title: "n1", expanded: true, icon: 'bf-icon gw-bars', children: [
              {title: "n1.1", icon: 'bf-icon gw-help'},
              {title: "n1.2", icon: 'bf-icon gw-interphone'},
              {title: "n1.3", icon: 'bf-icon gw-note'}
            ]
          },
          {
            title: "n2", expanded: true, children: [
              {title: "n2.1", selected: true},
              {title: "n2.2", selected: false},
              {title: "n2.3", selected: null}
            ]
          }
        ],
        debugLevel: 0,
        sortChildren: true
      };
      return Object.assign(_options, this.option);
    }

  }
</script>

<style lang="scss">
  @import "../../scss/glob";

  .bf-tree-wrap {
    @include full;
    display: flex;
    flex-direction: column;

    .bf-tree-filter, .bf-tree-container {
      flex: auto;
    }
    .bf-tree-filter {
      flex-grow: unset;
      .el-input__inner {
        @include nobdradius;
        @include noborder;
        border-bottom: 1px solid #dcdfe6;
      }
    }
    .bf-tree-container {
      .fancytree-container {
        overflow: auto;
        border: none;
        outline: none;

        .fancytree-node {

          .fancytree-custom-icon {
            color: initial;
            margin-top: 0;
          }
        }
      }
    }
  }

  .ui-icon.bf-icon {
    background: unset;
    top: 50%;
    transform: translateY(-50%);
    margin-top: unset;
    text-indent: unset;
    overflow: unset;
  }
</style>
